/**
 * @class Ext.Panel
 * @extends Ext.Container
 * 面板是一种为面向应用程序用户界面构建最佳的单元块，一种特定功能和结构化组件。 
 * 面板包含有底部和顶部的工具条，连同单独的头部、底部和body部分。
 * 它提供内建都得可展开和可闭合的行为，连同多个内建的可制定的行为的工具按钮。
 * 面板可简易地置入任意的容器或布局，而面板和渲染管线（rendering pipeline）则有框架完全控制。
 * @constructor
 * @param {Object} config 配置项对象
 */
Ext.Panel = Ext.extend(Ext.Container, {
    /**
     * 面板的头部元素 {@link Ext.Element Element}. 只读的。
     * <p>此元素用于承载 {@link #title} 和 {@link #tools}</p>
     * @type Ext.Element
     * @property header
     */
     
    /**
     * 面板的躯干元素 {@link Ext.Element Element} 用于承载HTML内容。
     * 内容可由{@link #html} 的配置指定, 亦可通过配置{@link autoLoad}加载，
     * 通过面板的{@link #getUpdater Updater}亦是同样的原理。只读的。
     * <p>注：若采用了上述的方法，那么面板则不能当作布局的容器嵌套子面板。</p>
     * <p>换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，
     * 它是由面板的局部(Panel's Layout)负责调控。
     * @type Ext.Element
     * @property body
     */
     
    /**
     * 面板的底部元素 @link Ext.Element Element}。只读的。
     * <p>此元素用于承载{@link #buttons}</p>
     * @type Ext.Element
     * @property header
     */  
       
    /**
     * @cfg {Mixed} applyTo
     * 即applyTo代表一个在页面上已经存在的元素或该元素的id，
     * 该元素通过markup的方式来表示欲生成的组件的某些结构化信息，
     * Ext在创建一个组件时，会首先考虑使用applyTo元素中的存在的元素，
     * 你可以认为applyTo是组件在页面上的模板，与YUI中的markup模式很相似。
     * 当你在 config中配置了applyTo属性后，renderTo属性将会被忽略。并且生成的组件将会被自动置去applyTo元素的父元素中。
     * The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in
     * the document that specifies some panel-specific structural markup.  When applyTo is used, constituent parts of
     * the panel can be specified by CSS class name within the main element, and the panel will automatically create those
     * components from that markup. Any required components not specified in the markup will be autogenerated if necessary.
     * The following class names are supported (baseCls will be replaced by {@link #baseCls}):
     * <ul><li>baseCls + '-header'</li>
     * <li>baseCls + '-header-text'</li>
     * <li>baseCls + '-bwrap'</li>
     * <li>baseCls + '-tbar'</li>
     * <li>baseCls + '-body'</li>
     * <li>baseCls + '-bbar'</li>
     * <li>baseCls + '-footer'</li></ul>
     * Using this config, a call to render() is not required.  If applyTo is specified, any value passed for
     * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the panel's container.
     */

         
    /**
     * @cfg {Object/Array} tbar
     * 面板顶部的工具条。此项可以是{@link Ext.Toolbar}的实例、工具条的配置对象，或由按钮配置项对象
     * 构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，
     * 应使用{@link #getTopToolbar}的方法代替。
     */
     
    /**
     * @cfg {Object/Array} tbar
     * 面板底部的工具条。此项可以是{@link Ext.Toolbar}的实例、工具条的配置对象，或由按钮配置项对象
     * 构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，
     * 应使用{@link #getBottomToolbar}的方法代替。
     */
          
    /**
     * @cfg {Boolean} header
     * True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，
     * 将使用{@link #title} 的内容设置到头部去，如没指定title则不会。
     * 如果设置好title，但头部设置为false，那么头部亦不会生成。
     */
     
    /**
     * @cfg {Boolean} footer
     * True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，
     * 若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。
     */
     
    /**
     * @cfg {String} title
     * 显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素(head)会自动生成和显示，
     * 除非{@link #header}强制设为false。如果你不想在写配置时指定好title，
     * 不过想在后面才加入的话，你必须先指定一个非空的标题。(空白字符''亦可)或header：true
     * 这样才保证容器元素生成出来。
     */
    /**
     * @cfg {Array} buttons
     * 在面板底部加入按钮，{@link Ext.Button}配置的数组。
     */
     
    /**
     * @cfg {Object/String/Function} autoLoad
     * 一个特定的url反馈到Updater的{@link Ext.Updater#update}方法。<p>
     * 若autoLoad非null，面板在渲染后立即加载内容。同时该面板{@link #body}元素的默认URL属性就是这URL，
     * 所以可随时调用{@link Ext.Element#refresh refresh}的方法。</p>
     */
     
    /**
     * @cfg {Boolean} frame
     * True表示为面板的边框外框可自定义的，false表示为边框可1px的点线(默认为false)
     */
     
     
    /**
     * @cfg {Boolean} border
     * True表示为显示出面板body元素的边框，false则隐藏(缺省为true)，
     * 默认下，边框是一套2px宽的内边框，但可在{@link #bodyBorder}中进一步设置。
     */
     
    /**
     * @cfg {Boolean} bodyBorder
     * True表示为显示出面板body元素的边框，false则隐藏(缺省为true)，
     * 只有 {@link #border} == true时有效. 若 border == true and bodyBorder == false, 边框则为1px宽，
     * 可指定整个body元素的内置外观。
     */
     
    /**
     * @cfg {String/Object/Function} bodyStyle
     * 制定body元素的CSS样式。格式形如{@link Ext.Element#applyStyles}(缺省为null)。
     */
     
    /**
     * @cfg {String} iconCls
     * 一个能提供背景图片的CSS样式类，用于面板头部的图标：(默认为'')。
     */
    /**
     * @cfg {Boolean} collapsible
     * True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。
     * false表示为保持面板为一个静止的尺寸(缺省为false)。
     */
     
    /**
     * @cfg {Array} tools
     * 一个按钮配置数组，加入到头部的工具条区域。每个工具配置可包含下列属性： 
     * <div class="mdetail-params"><ul>
     * <li><b>id</b> : String<p class="sub-desc"><b>必须的。</b>要创建工具的类型。值可以是：<ul>
     * <li><tt>toggle</tt> （当{@link #collapsible}为<tt>true</tt>时默认创建）</li>
     * <li><tt>close</tt></li>
     * <li><tt>minimize</tt></li>
     * <li><tt>maximize</tt></li>
     * <li><tt>restore</tt></li>
     * <li><tt>gear</tt></li>
     * <li><tt>pin</tt></li>
     * <li><tt>unpin</tt></li>
     * <li><tt>right</tt></li>
     * <li><tt>left</tt></li>
     * <li><tt>up</tt></li>
     * <li><tt>down</tt></li>
     * <li><tt>refresh</tt></li>
     * <li><tt>minus</tt></li>
     * <li><tt>plus</tt></li>
     * <li><tt>help</tt></li>
     * <li><tt>search</tt></li>
     * <li><tt>save</tt></li>
     * </ul></div></p></li>
     * <li><b>handler</b> : Function<p class="sub-desc"><b>必须的。</b> 点击后执行的函数。
     * 传入的参数有：<ul>
     * <li><b>event</b> : Ext.EventObject<p class="sub-desc">单击事件</p></li>
     * <li><b>toolEl</b> : Ext.Element<p class="sub-desc">工具元素（tool Element）</p></li>
     * <li><b>Panel</b> : Ext.Panel<p class="sub-desc">面板</p></li>
     * </ul></p></li>
     * <li><b>scope</b> : Object<p class="sub-desc">调用句柄的作用域</p></li>
     * <li><b>qtip</b> : String/Object<p class="sub-desc">提示字符串，或{@link Ext.QuickTip#register}的配置参数</p></li>
     * <li><b>hidden</b> : Boolean<p class="sub-desc">True表示为渲染为隐藏</p></li>
     * <li><b>on</b> : Object<p class="sub-desc">特定事件侦听器的配置对象，格式行如{@link #addListener}的参数</p></li>
     * </ul>
     * 用法举例：
     * <pre><code>
tools:[{
    id:'refresh',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
}]
</code></pre>
     * 注意面板关闭时的轮换按钮（toggle tool）的实现是分离出去，这些工具按钮只提供视觉上的按钮。
     * 所需的功能必须由句柄提供以实现相应的行为。
     */
        
    /**
     * @cfg {Boolean} hideCollapseTool
     * True表示为不出 展开/收缩的轮换按钮，当{@link #collapsible} = true，false就显示（默认为false）。
     */
    /**
     * @cfg {Boolean} titleCollapse
     * True表示为允许单击头部区域任何一个位置都可收缩面板(当{@link #collapsible} = true)
     * 反之只允许单击工具按钮(默认为false)。
     */
    /**
     * @cfg {Boolean} autoScroll
     * True表示为在面板body元素上，设置overflow：'auto'和出现滚动条
     * false表示为裁剪所有溢出的内容(默认为false)。
     */
    /**
     * @cfg {Boolean} floating
     * True 表示为浮动此面板(带有自动填充和投影的绝对定位)，
     * false表示为在其渲染的位置"就近"显示(默认为false)注意：默认情况下，设置为"浮动"会使得面板
     * 在非正数的坐标上显示，以致不能正确显示，由于面板这时绝对定位的，必须精确地设置渲染后的位置
     * (如：myPanel.setPosition(100,100);)而且，一个浮动面板是没有固定的宽度，(autoWidth:true),
     * 导致面板会填满与视图右方的区域。
     * hidden：True表示为初始渲染即隐藏，
     * on：指定一个监听器，格式{add Listened},用法举例：刷新逻辑。
     */
     
    /**
     * @cfg {Boolean/String} shadow
     * True 表示为(或一个有效{@link Ext.Shadow#mode} 值) 在面板后显示投影效果，(默认为'sides'四边)
     * 注意此项只当floating = true时有效。
     */
     
    /**
     * @cfg {Number} shadowOffset
     * 投影偏移的象素值(默认为4)
     * 注意此项只当floating = true时有效.
     */
    /**
     * @cfg {Boolean} shim
     * False表示为禁止用iframe填充，有些浏览器可能需要设置(默认为true)
     * 注意此项只当floating = true时有效.
     */
    /**
     * @cfg {String/Object} html
     * 一段HTML片段,或 {@link Ext.DomHelper DomHelper} 作为面板body内容(默认为 '').
     */
     
    /**
     * @cfg {String} contentEl
     * 现有HTML节点的id,用作面板body的内容 (缺省为 '').
     */
     
 	/**
     * @cfg {Object/Array} keys
     * KeyMap 的配置项对象 (格式形如: {@link Ext.KeyMap#addBinding} 
     * 可用于将key分配到此面板 (缺省为 null).
     */
     
	/**
  	 * @cfg {Boolean} draggable
  	 * True表示为激活此面板的拖动 (默认为false) 虽然 Ext.Panel.DD 是一个内部类并未归档的,但
  	 * 亦可自定义拖放 (drag/drop) 的实现,具体做法是传入一个 Ext.Panel.DD 的配置代替 true 值。
     */
     
    /**
    * @cfg {String} baseCls
    * 作用在面板元素上的CSS样式类 （默认为 'x-panel').
    */
    baseCls : 'x-panel',
    
    /**
    * @cfg {String} collapsedCls
    * 当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed').
    */
    collapsedCls : 'x-panel-collapsed',
    
    /**
    * @cfg {Boolean} maskDisabled
    * True表示为当面板不可用时进行遮罩（默认为true）。 当面板禁用时，总是会告知下面的元素亦要禁用，
    * 但遮罩是另外一种方式同样达到禁用的效果。
    */    
    maskDisabled: true,
    /**
    * @cfg {Boolean} animCollapse
    * True 表示为面板闭合过程附有动画效果 (默认为true,在类 {@link Ext.Fx} 可用的情况下).
    */
    animCollapse: Ext.enableFx,
    
    /**
    * @cfg {Boolean} headerAsText
    * True表示为显示面板头部的标题 (默认为 true).
    */
    headerAsText: true,
    /**
    * @cfg {String} buttonAlign
    * 在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center' (默认为 'right').
    */
    buttonAlign: 'right',
    /**
     * @cfg {Boolean} collapsed
     * True 表示为渲染面板后即闭合 (默认为false).
     */
     collapsed : false,
    /**
    * @cfg {Boolean} collapseFirst
    * True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方 (默认为true).
    */
    collapseFirst: true,
    /**
     * @cfg {Number} minButtonWidth
     * 此面板上按钮的最小宽度 (默认为75)
     */
     minButtonWidth:75,
    /**
     * @cfg {String} elements
     * 面板渲染后，要初始化面板元素的列表，用逗号分隔开。
     * 正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下，
     * 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。
     * 加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。
     * 有效值是：<ul>
     * <li><b>header</b></li>
     * <li><b>tbar</b> (top bar)</li>
     * <li><b>body</b></li>
     * <li><b>bbar</b> (bottom bar)</li>
     * <li><b>footer</b><li>
     * </ul>
     * 缺省为'body'.
     */    
    elements : 'body',

    // protected - these could be used to customize the behavior of the window,
    // but changing them would not be useful without further mofifications and
    // could lead to unexpected or undesirable results.
    toolTarget : 'header',
    collapseEl : 'bwrap',
    slideAnchor : 't',

    // private, notify box this class will handle heights
    deferHeight: true,
    // private
    expandDefaults: {
        duration:.25
    },
    // private
    collapseDefaults: {
        duration:.25
    },

    // private
    initComponent : function(){
        Ext.Panel.superclass.initComponent.call(this);

        this.addEvents(
            /**
             * @event bodyresiz
             * 当面板的大小变化后触发。
             * @param {Ext.Panel} p 调节大小的面板
             * @param {Number} width 面板新宽度
             * @param {Number} height 面板新高度
             */
            'bodyresize',
            /**
             * @event titlechange
             * 当面板的标题有改动后触发。
             * @param {Ext.Panel} p 标题被改动的那个面板
             * @param {String} 新标题
             */
            'titlechange',
            /**
             * @event collapse
             * 当面板被闭合后触发。
             * @param {Ext.Panel} p 闭合的那个面板
             */
            'collapse',
            /**
             * @event expand
             * 当面板被展开后触发。
             * @param {Ext.Panel} p 展开的面板
             */
            'expand',
            /**
             * @event beforecollapse
             * 当面板被闭合之前触发。若句柄返回false则取消闭合的动作。
             * @param {Ext.Panel} p 正被闭合的面板
             * @param {Boolean} animate True表示闭合时带有动画效果
             */
            'beforecollapse',
            /**
             * @event beforeexpand
             * 当面板被展开之前触发。若句柄返回false则取消展开的动作。
             * @param {Ext.Panel} p 正被展开的面板
             * @param {Boolean} animate True表示闭合时带有动画效果
             */
            'beforeexpand',
            /**
             * @event beforeclose
             * 当面板被关闭之前触发。 
             * 注意面板不直接支持“关闭”，不过在面板的子类（如{@link Ext.Window}）可支持即可调用该事件。
             * 若句柄返回false则取消关闭的动作。
             * @param {Ext.Panel} p 正被关闭的面板
             */
            'beforeclose',
            /**
             * @event beforeclose
             * 当面板被关闭后触发。 
             * 注意面板不直接支持“关闭”，不过在面板的子类（如{@link Ext.Window}）可支持即可调用该事件。
             * @param {Ext.Panel} p 已关闭的面板
             */             
            'close',
            /**
             * @event activate
             * 当面板视觉上被激活后触发。 
             * 注意面板不直接支持“激活”，不过在面板的子类（如{@link Ext.Window}）可支持即可调用该事件。
             * 另外在TabPanel控制下子组件也会触发activate和deactivate事件。
             * @param {Ext.Panel} p 已活动的面板
             */                         
            'activate',
            /**
             * @event activate
             * 当面板视觉上取消活动后触发。 
             * 注意面板不直接支持“取消活动”，不过在面板的子类（如{@link Ext.Window}）可支持即可调用该事件。
             * 另外在TabPanel控制下子组件也会触发activate和deactivate事件。
             */  
            'deactivate'
        );

        // shortcuts
        if(this.tbar){
            this.elements += ',tbar';
            if(typeof this.tbar == 'object'){
                this.topToolbar = this.tbar;
            }
            delete this.tbar;
        }
        if(this.bbar){
            this.elements += ',bbar';
            if(typeof this.bbar == 'object'){
                this.bottomToolbar = this.bbar;
            }
            delete this.bbar;
        }

        if(this.header === true){
            this.elements += ',header';
            delete this.header;
        }else if(this.title && this.header !== false){
            this.elements += ',header';
        }

        if(this.footer === true){
            this.elements += ',footer';
            delete this.footer;
        }

        if(this.buttons){
            var btns = this.buttons;
            /**
             * This Panel's Array of buttons as created from the <tt>buttons</tt>
             * config property. Read only.
             * @type Array
             * @property buttons
             */
            this.buttons = [];
            for(var i = 0, len = btns.length; i < len; i++) {
                if(btns[i].render){ // button instance
                    this.buttons.push(btns[i]);
                }else{
                    this.addButton(btns[i]);
                }
            }
        }
        if(this.autoLoad){
            this.on('render', this.doAutoLoad, this, {delay:10});
        }
    },

    // private
    createElement : function(name, pnode){
        if(this[name]){
            pnode.appendChild(this[name].dom);
            return;
        }

        if(name === 'bwrap' || this.elements.indexOf(name) != -1){
            if(this[name+'Cfg']){
                this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
            }else{
                var el = document.createElement('div');
                el.className = this[name+'Cls'];
                this[name] = Ext.get(pnode.appendChild(el));
            }
        }
    },

    // private
    onRender : function(ct, position){
        Ext.Panel.superclass.onRender.call(this, ct, position);

        this.createClasses();

        if(this.el){ // existing markup
            this.el.addClass(this.baseCls);
            this.header = this.el.down('.'+this.headerCls);
            this.bwrap = this.el.down('.'+this.bwrapCls);
            var cp = this.bwrap ? this.bwrap : this.el;
            this.tbar = cp.down('.'+this.tbarCls);
            this.body = cp.down('.'+this.bodyCls);
            this.bbar = cp.down('.'+this.bbarCls);
            this.footer = cp.down('.'+this.footerCls);
            this.fromMarkup = true;
        }else{
            this.el = ct.createChild({
                id: this.id,
                cls: this.baseCls
            }, position);
        }
        var el = this.el, d = el.dom;

        if(this.cls){
            this.el.addClass(this.cls);
        }

        if(this.buttons){
            this.elements += ',footer';
        }

        // This block allows for maximum flexibility and performance when using existing markup

        // framing requires special markup
        if(this.frame){
            el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));

            this.createElement('header', d.firstChild.firstChild.firstChild);
            this.createElement('bwrap', d);

            // append the mid and bottom frame to the bwrap
            var bw = this.bwrap.dom;
            var ml = d.childNodes[1], bl = d.childNodes[2];
            bw.appendChild(ml);
            bw.appendChild(bl);

            var mc = bw.firstChild.firstChild.firstChild;
            this.createElement('tbar', mc);
            this.createElement('body', mc);
            this.createElement('bbar', mc);
            this.createElement('footer', bw.lastChild.firstChild.firstChild);

            if(!this.footer){
                this.bwrap.dom.lastChild.className += ' x-panel-nofooter';
            }
        }else{
            this.createElement('header', d);
            this.createElement('bwrap', d);

            // append the mid and bottom frame to the bwrap
            var bw = this.bwrap.dom;
            this.createElement('tbar', bw);
            this.createElement('body', bw);
            this.createElement('bbar', bw);
            this.createElement('footer', bw);

            if(!this.header){
                this.body.addClass(this.bodyCls + '-noheader');
                if(this.tbar){
                    this.tbar.addClass(this.tbarCls + '-noheader');
                }
            }
        }

        if(this.border === false){
            this.el.addClass(this.baseCls + '-noborder');
            this.body.addClass(this.bodyCls + '-noborder');
            if(this.header){
                this.header.addClass(this.headerCls + '-noborder');
            }
            if(this.footer){
                this.footer.addClass(this.footerCls + '-noborder');
            }
            if(this.tbar){
                this.tbar.addClass(this.tbarCls + '-noborder');
            }
            if(this.bbar){
                this.bbar.addClass(this.bbarCls + '-noborder');
            }
        }

        if(this.bodyBorder === false){
           this.body.addClass(this.bodyCls + '-noborder');
        }

        if(this.bodyStyle){
           this.body.applyStyles(this.bodyStyle);
        }

        this.bwrap.enableDisplayMode('block');

        if(this.header){
            this.header.unselectable();

            // for tools, we need to wrap any existing header markup
            if(this.headerAsText){
                this.header.dom.innerHTML =
                    '<span class="' + this.headerTextCls + '">'+this.header.dom.innerHTML+'</span>';

                if(this.iconCls){
                    this.setIconClass(this.iconCls);
                }
            }
        }

        if(this.floating){
            this.makeFloating(this.floating);
        }

        if(this.collapsible){
            this.tools = this.tools ? this.tools.slice(0) : [];
            if(!this.hideCollapseTool){
                this.tools[this.collapseFirst?'unshift':'push']({
                    id: 'toggle',
                    handler : this.toggleCollapse,
                    scope: this
                });
            }
            if(this.titleCollapse && this.header){
                this.header.on('click', this.toggleCollapse, this);
                this.header.setStyle('cursor', 'pointer');
            }
        }
        if(this.tools){
            var ts = this.tools;
            this.tools = {};
            this.addTool.apply(this, ts);
        }else{
            this.tools = {};
        }

        if(this.buttons && this.buttons.length > 0){
            // tables are required to maintain order and for correct IE layout
            var tb = this.footer.createChild({cls:'x-panel-btns-ct', cn: {
                cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,
                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
            }}, null, true);
            var tr = tb.getElementsByTagName('tr')[0];
            for(var i = 0, len = this.buttons.length; i < len; i++) {
                var b = this.buttons[i];
                var td = document.createElement('td');
                td.className = 'x-panel-btn-td';
                b.render(tr.appendChild(td));
            }
        }

        if(this.tbar && this.topToolbar){
            if(this.topToolbar instanceof Array){
                this.topToolbar = new Ext.Toolbar(this.topToolbar);
            }
            this.topToolbar.render(this.tbar);
        }
        if(this.bbar && this.bottomToolbar){
            if(this.bottomToolbar instanceof Array){
                this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
            }
            this.bottomToolbar.render(this.bbar);
        }
    },


    /**
     * icon class if one has already been set.
     * 为该面板设置图标的样式类。此方法会覆盖当前现有的图标。
     * @param {String} cls 新CSS样式类的名称
     */     
    setIconClass : function(cls){
        var old = this.iconCls;
        this.iconCls = cls;
        if(this.rendered){
            if(this.frame){
                this.header.addClass('x-panel-icon');
                this.header.replaceClass(old, this.iconCls);
            }else{
                var hd = this.header.dom;
                var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null;
                if(img){
                    Ext.fly(img).replaceClass(old, this.iconCls);
                }else{
                    Ext.DomHelper.insertBefore(hd.firstChild, {
                        tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
                    });
                 }
            }
        }
    },

    // private
    makeFloating : function(cfg){
        this.floating = true;
        this.el = new Ext.Layer(
            typeof cfg == 'object' ? cfg : {
                shadow: this.shadow !== undefined ? this.shadow : 'sides',
                shadowOffset: this.shadowOffset,
                constrain:false,
                shim: this.shim === false ? false : undefined
            }, this.el
        );
    },


    /**
     * 返回面板顶部区域的工具条.
     * @return {Ext.Toolbar} toolbar对象
     */
     getTopToolbar : function(){
        return this.topToolbar;
    },

    /**
     * 返回面板底部区域的工具条.
     * @return {Ext.Toolbar} toolbar对象
     */
     getBottomToolbar : function(){
        return this.bottomToolbar;
    },

    /**
     * 为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过{@link #buttons}的配置项添加按钮。
     * @param {String/Object} config 合法的{@link Ext.Button}配置项对象。若字符类型就表示这是按钮的提示文字。
     * @param {Function} handler 按钮被按下时执行的函数，等同{@link Ext.Button#click}
     * @param {Object} scope 按钮触发时的事件处理函数所在作用域
     * @return {Ext.Button} 已添加的按钮
     */
     addButton : function(config, handler, scope){
        var bc = {
            handler: handler,
            scope: scope,
            minWidth: this.minButtonWidth,
            hideParent:true
        };
        if(typeof config == "string"){
            bc.text = config;
        }else{
            Ext.apply(bc, config);
        }
        var btn = new Ext.Button(bc);
        if(!this.buttons){
            this.buttons = [];
        }
        this.buttons.push(btn);
        return btn;
    },

    // private
    addTool : function(){
        if(!this[this.toolTarget]) { // no where to render tools!
            return;
        }
        if(!this.toolTemplate){
            // initialize the global tool template on first use
            var tt = new Ext.Template(
                 '<div class="x-tool x-tool-{id}">&#160;</div>'
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.Panel.prototype.toolTemplate = tt;
        }
        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
            var tc = a[i], overCls = 'x-tool-'+tc.id+'-over';
            var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true);
            this.tools[tc.id] = t;
            t.enableDisplayMode('block');
            t.on('click', this.createToolHandler(t, tc, overCls, this));
            if(tc.on){
                t.on(tc.on);
            }
            if(tc.hidden){
                t.hide();
            }
            if(tc.qtip){
                if(typeof tc.qtip == 'object'){
                    Ext.QuickTips.register(Ext.apply({
                          target: t.id
                    }, tc.qtip));
                } else {
                    t.dom.qtip = tc.qtip;
                }
            }
            t.addClassOnOver(overCls);
        }
    },

    // private
    onShow : function(){
        if(this.floating){
            return this.el.show();
        }
        Ext.Panel.superclass.onShow.call(this);
    },

    // private
    onHide : function(){
        if(this.floating){
            return this.el.hide();
        }
        Ext.Panel.superclass.onHide.call(this);
    },

    // private
    createToolHandler : function(t, tc, overCls, panel){
        return function(e){
            t.removeClass(overCls);
            e.stopEvent();
            if(tc.handler){
                tc.handler.call(tc.scope || t, e, t, panel);
            }
        };
    },

    // private
    afterRender : function(){
        if(this.fromMarkup && this.height === undefined && !this.autoHeight){
            this.height = this.el.getHeight();
        }
        if(this.floating && !this.hidden && !this.initHidden){
            this.el.show();
        }
        if(this.title){
            this.setTitle(this.title);
        }
        if(this.autoScroll){
            this.body.dom.style.overflow = 'auto';
        }
        if(this.html){
            this.body.update(typeof this.html == 'object' ?
                             Ext.DomHelper.markup(this.html) :
                             this.html);
            delete this.html;
        }
        if(this.contentEl){
            var ce = Ext.getDom(this.contentEl);
            Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
            this.body.dom.appendChild(ce);
        }
        if(this.collapsed){
            this.collapsed = false;
            this.collapse(false);
        }
        Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
        this.initEvents();
    },

    // private
    getKeyMap : function(){
        if(!this.keyMap){
            this.keyMap = new Ext.KeyMap(this.el, this.keys);
        }
        return this.keyMap;
    },

    // private
    initEvents : function(){
        if(this.keys){
            this.getKeyMap();
        }
        if(this.draggable){
            this.initDraggable();
        }
    },

    // private
    initDraggable : function(){
        this.dd = new Ext.Panel.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
    },

    // private
    beforeEffect : function(){
        if(this.floating){
            this.el.beforeAction();
        }
        this.el.addClass('x-panel-animated');
    },

    // private
    afterEffect : function(){
        this.syncShadow();
        this.el.removeClass('x-panel-animated');
    },

    // private - wraps up an animation param with internal callbacks
    createEffect : function(a, cb, scope){
        var o = {
            scope:scope,
            block:true
        };
        if(a === true){
            o.callback = cb;
            return o;
        }else if(!a.callback){
            o.callback = cb;
        }else { // wrap it up
            o.callback = function(){
                cb.call(scope);
                Ext.callback(a.callback, a.scope);
            };
        }
        return Ext.applyIf(o, a);
    },


    /**
     * 展开面板body, 显示内容. 触发 {@link #beforecollapse} 事件,如返回false则取消展开的动作.
     * @param {Boolean} animate True 表示为转换状态时出现动画, 
     * (默认为面板 {@link #animCollapse} 的配置值)
     * @return {Ext.Panel} this
     */
     collapse : function(animate){
        if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){
            return;
        }
        var doAnim = animate === true || (animate !== false && this.animCollapse);
        this.beforeEffect();
        this.onCollapse(doAnim, animate);
        return this;
    },

    // private
    onCollapse : function(doAnim, animArg){
        if(doAnim){
            this[this.collapseEl].slideOut(this.slideAnchor,
                    Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this),
                        this.collapseDefaults));
        }else{
            this[this.collapseEl].hide();
            this.afterCollapse();
        }
    },

    // private
    afterCollapse : function(){
        this.collapsed = true;
        this.el.addClass(this.collapsedCls);
        this.afterEffect();
        this.fireEvent('collapse', this);
    },


    /**
     * 展开面板的主体部分，显示全部。这会触发{@link #beforeexpand}的事件，若事件处理函数返回false那么这个方法将失效。
     * @param {Boolean} animate True 表示为转换状态时出现动画, 
     * (默认为面板 {@link #animCollapse} 的配置值)
     * @return {Ext.Panel} this
     */
     expand : function(animate){
        if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){
            return;
        }
        var doAnim = animate === true || (animate !== false && this.animCollapse);
        this.el.removeClass(this.collapsedCls);
        this.beforeEffect();
        this.onExpand(doAnim, animate);
        return this;
    },

    // private
    onExpand : function(doAnim, animArg){
        if(doAnim){
            this[this.collapseEl].slideIn(this.slideAnchor,
                    Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
                        this.expandDefaults));
        }else{
            this[this.collapseEl].show();
            this.afterExpand();
        }
    },

    // private
    afterExpand : function(){
        this.collapsed = false;
        this.afterEffect();
        this.fireEvent('expand', this);
    },


    /**
     * 根据面板的当前状态,采取相应的 {@link #expand} 或 {@link #collapse}。
     * @param {Boolean} animate True 表示为转换状态时出现动画, 
     * (默认为面板 {@link #animCollapse} 的配置值)
     * @return {Ext.Panel} this
     */
     toggleCollapse : function(animate){
        this[this.collapsed ? 'expand' : 'collapse'](animate);
        return this;
    },

    // private
    onDisable : function(){
        if(this.rendered && this.maskDisabled){
            this.el.mask();
        }
        Ext.Panel.superclass.onDisable.call(this);
    },

    // private
    onEnable : function(){
        if(this.rendered && this.maskDisabled){
            this.el.unmask();
        }
        Ext.Panel.superclass.onEnable.call(this);
    },

    // private
    onResize : function(w, h){
        if(w !== undefined || h !== undefined){
            if(!this.collapsed){
                if(typeof w == 'number'){
                    this.body.setWidth(
                            this.adjustBodyWidth(w - this.getFrameWidth()));
                }else if(w == 'auto'){
                    this.body.setWidth(w);
                }

                if(typeof h == 'number'){
                    this.body.setHeight(
                            this.adjustBodyHeight(h - this.getFrameHeight()));
                }else if(h == 'auto'){
                    this.body.setHeight(h);
                }
            }else{
                this.queuedBodySize = {width: w, height: h};
                if(!this.queuedExpand && this.allowQueuedExpand !== false){
                    this.queuedExpand = true;
                    this.on('expand', function(){
                        delete this.queuedExpand;
                        this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
                        this.doLayout();
                    }, this, {single:true});
                }
            }
            this.fireEvent('bodyresize', this, w, h);
        }
        this.syncShadow();
    },

    // private
    adjustBodyHeight : function(h){
        return h;
    },

    // private
    adjustBodyWidth : function(w){
        return w;
    },

    // private
    onPosition : function(){
        this.syncShadow();
    },

    // private
    onDestroy : function(){
        if(this.tools){
            for(var k in this.tools){
                Ext.destroy(this.tools[k]);
            }
        }
        if(this.buttons){
            for(var b in this.buttons){
                Ext.destroy(this.buttons[b]);
            }
        }
        Ext.destroy(
            this.topToolbar,
            this.bottomToolbar
        );
        Ext.Panel.superclass.onDestroy.call(this);
    },


    /**
     * 返回面板框架元素的宽度 (不含body宽度) 要取的body宽度参阅 {@link #getInnerWidth}。
     * @return {Number} The frame width
     */
     getFrameWidth : function(){
        var w = this.el.getFrameWidth('lr');

        if(this.frame){
            var l = this.bwrap.dom.firstChild;
            w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r'));
            var mc = this.bwrap.dom.firstChild.firstChild.firstChild;
            w += Ext.fly(mc).getFrameWidth('lr');
        }
        return w;
    },

    /**
     * 返回面板框架元素的高度 (包括顶部/底部工具条的高度) 要取的body高度参阅{@link #getInnerHeight}。
     * @return {Number} 框架高度
     */
     getFrameHeight : function(){
        var h  = this.el.getFrameWidth('tb');
        h += (this.tbar ? this.tbar.getHeight() : 0) +
             (this.bbar ? this.bbar.getHeight() : 0);

        if(this.frame){
            var hd = this.el.dom.firstChild;
            var ft = this.bwrap.dom.lastChild;
            h += (hd.offsetHeight + ft.offsetHeight);
            var mc = this.bwrap.dom.firstChild.firstChild.firstChild;
            h += Ext.fly(mc).getFrameWidth('tb');
        }else{
            h += (this.header ? this.header.getHeight() : 0) +
                (this.footer ? this.footer.getHeight() : 0);
        }
        return h;
    },

    /**
     * 返回面板body元素的宽度 (不含任何框架元素) 要取的框架宽度参阅 {@link #getFrameWidth}.
     * @return {Number} body宽度
     */
    getInnerWidth : function(){
        return this.getSize().width - this.getFrameWidth();
    },

    /**
     * 返回面板body元素的高度 (不包括任何框架元素的高度) 要取的框架高度参阅{@link #getFrameHeight}.
     * @return {Number} body高度
     */
    getInnerHeight : function(){
        return this.getSize().height - this.getFrameHeight();
    },

    // private
    syncShadow : function(){
        if(this.floating){
            this.el.sync(true);
        }
    },

    // private
    getLayoutTarget : function(){
        return this.body;
    },

    /**
     * 设置面板的标题文本，你也可以在这里指定面板的图片（CSS样式类）。
     * @param {String} title 要设置的标题
     * @param {String} (optional) iconCls 为该面板用户自定义的图标，这是一个CSS样式类的字符串。
     */
    setTitle : function(title, iconCls){
        this.title = title;
        if(this.header && this.headerAsText){
            this.header.child('span').update(title);
        }
        if(iconCls){
            this.setIconClass(iconCls);
        }
        this.fireEvent('titlechange', this, title);
        return this;
    },

    /**
     * 获取该面板的{@link Ext.Updater}。主要是为面板的主体部分（body）提过面向AJAX的内容更新。
     * @return {Ext.Updater} Updater对象
     */
    getUpdater : function(){
        return this.body.getUpdater();
    },

     /**
     * 利用XHR的访问加载远程的内容，立即显示在面板中
     * @param {Object/String/Function} config 特定的配置项对象，可包含以下选项：
<pre><code>
panel.load({
    url: "your-url.php",
    params: {param1: "foo", param2: "bar"}, // 或URL字符串，要已编码的
    callback: yourFunction,
    scope: yourObject, // 回调的可选作用域
    discardUrl: false,
    nocache: false,
    text: "Loading...",
    timeout: 30,
    scripts: false
});
</code></pre>
     * 其中必填的属性是url。至于可选的属性有nocache、text与scripts，分别代表禁止缓存（disableCaching）、加载中的提示信息和是否对脚本敏感，都是关联到面板的Updater实例。
     * @return {Ext.Panel} this
     */
    load : function(){
        var um = this.body.getUpdater();
        um.update.apply(um, arguments);
        return this;
    },

    // private
    beforeDestroy : function(){
        Ext.Element.uncache(
            this.header,
            this.tbar,
            this.bbar,
            this.footer,
            this.body
        );
    },

    // private
    createClasses : function(){
        this.headerCls = this.baseCls + '-header';
        this.headerTextCls = this.baseCls + '-header-text';
        this.bwrapCls = this.baseCls + '-bwrap';
        this.tbarCls = this.baseCls + '-tbar';
        this.bodyCls = this.baseCls + '-body';
        this.bbarCls = this.baseCls + '-bbar';
        this.footerCls = this.baseCls + '-footer';
    },

    // private
    createGhost : function(cls, useShim, appendTo){
        var el = document.createElement('div');
        el.className = 'x-panel-ghost ' + (cls ? cls : '');
        if(this.header){
            el.appendChild(this.el.dom.firstChild.cloneNode(true));
        }
        Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight());
        el.style.width = this.el.dom.offsetWidth + 'px';;
        if(!appendTo){
            this.container.dom.appendChild(el);
        }else{
            Ext.getDom(appendTo).appendChild(el);
        }
        if(useShim !== false && this.el.useShim !== false){
            var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el);
            layer.show();
            return layer;
        }else{
            return new Ext.Element(el);
        }
    },

    // private
    doAutoLoad : function(){
        this.body.load(
            typeof this.autoLoad == 'object' ?
                this.autoLoad : {url: this.autoLoad});
    }
});
Ext.reg('panel', Ext.Panel);
